<template>
	<cl-dialog
		:title="`${type == 'add' ? '新增' : type == 'copy' ? '复制' : '修改'}广告账户`"
		:visible.sync="visible"
		width="30%"
		append-to-body
		@close="reset"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="form"
			label-width="100px"
			label-position="top"
			class="demo-form"
		>
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					@change="changeBiz"
					placeholder="请选择所属事业部"
					filterable
					style="width: 100%"
					:disabled="type == 'edit'"
				>
					<el-option
						v-for="(item, index) in business"
						:key="index"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input v-model="form.name" placeholder="名称" />
			</el-form-item>
			<el-form-item label="所属平台" prop="biz_id">
				<cl-select
					v-model="form.media_platform"
					placeholder="请选择广告平台"
					filterable
					style="width: 100%"
				>
					<el-option key="1" label="抖音" value="1" />
					<el-option key="2" label="腾讯" value="2" />
					<el-option key="3" label="快手" value="3" />
				</cl-select>
			</el-form-item>
            <el-form-item label="登录邮箱" prop="email">
				<el-input v-model="form.email" placeholder="登录邮箱" />
			</el-form-item>
            <el-form-item label="登录电话" prop="phone">
				<el-input v-model="form.phone" placeholder="登录电话" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>

<script>
import SettingHelp from "@/components/setting-help";
export default {
	components: {
		SettingHelp
	},
	data() {
		return {
			saving: false,
			visible: false,
			type: "",
			form: {
				biz_id: "", //事业部id
				name: "", //名称
                email: "",//登录邮箱
                phone: "",//登录手机号
				media_platform: "",
                id: undefined, //id
			},
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				name: [{ required: true, message: "请填写名称" }],
                email: [{ required: true, message: "请填写登录邮箱" }],
			},
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(row, type) {
			this.type = type;
			if (type != "add") {
				this.form = { ...row };
			}
			this.init();
			this.visible = true
		},
		async init() {
			const { biz_id } = this.form;
			this.getBizRefBrand(biz_id);
			
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				const { biz_id } = this.form;
				await this.$service.oceanengine[
					this.type == "add" || this.type == "copy" ? "addAccount" : "editAccount"
				](this.form).done(() => {
					this.saving = false;
				});
				// this.$refs.drawer.AddAccounts();
				this.$message.success(
					`${this.type == "add" ? "新增" : this.type == "copy" ? "复制" : "修改"}成功`
				);
				this.$emit("refresh", biz_id, this.type == "edit" ? false : true);
				this.close();
			});
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
			this.resetForm();
		},
		close() {
			this.reset();
			this.visible = false
		},
		//切换事业部
		changeBiz() {
			this.init();
		},
		resetForm() {
			this.$resetFields(this.form);
			this.form.biz_id = this.getCurrBiz();
			this.form.id = undefined;
		}
	}
};
</script>

<style></style>
